<template>
  <div class="Toppadding">
      <my-head title="支付界面"></my-head>
      <div class="dao_timer">
          <p>剩余支付时间</p>
            <van-count-down :time="time">
            <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
            </template>
            </van-count-down>
      </div>
      <div class="Allmoney">
            ￥{{Allmoney}}
      </div>
      <div class="money_foot">
          <p @click="payload">下一步，支付￥{{Allmoney}}</p>
      </div>

  </div>
</template>

<script>
export default {
data() {
    return {
         time: 3 * 60 * 60 * 1000,
         Allmoney:null
    }
},
methods: {
    payload(){
        console.log(11);
        this.$dialog.confirm({
                title: '操作提示',
                message: '请支付'+ '' +this.Allmoney+'元',
            })
            .then(() => {
               this.$router.push({
                 name:'order'
               })
            }).catch(() => {
                this.$router.push({
                 name:'order'
               })
            })
    }
},
mounted() {
    if(this.$route.query){
        this.Allmoney=this.$route.query.money
    }
},
}
</script>

<style>
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
  .dao_timer{
        padding-top: 33px;
        padding-bottom: 26px;
        text-align: center;
  }
  .dao_timer p{
      font-size: 30px;
      margin-bottom: 10px;
  }
  .Allmoney{
      font-size: 16px;
    color: #fb7299;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 20px;
    white-space: nowrap;
    height: 44px;
    width: 100%;
    background: #fff;
    line-height: 44px;
  }
  .money_foot{
      padding: 15px;
      position: fixed;
      bottom: 0;
      color: #fff;
      width: 100%;
  }
  .money_foot p{
        width: 100%;
        height: 40px;
        border-radius: 40px;
        background: #fb7299;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
  }
</style>